<template>
    <div class="blog-content">
        博客详情界面
        <ul>
            <li>{{ $route.params }}</li>
            <li>{{ $route.params.id }}</li>
            <li>{{ id }}</li>
        </ul>
        <button @click="showRouteParams">在 JS 中获取路由路径参数</button>
    </div>
</template>

<script>
export default {
    props: ['id'],
    methods: {
        showRouteParams() {
            console.log(this.$route.params) // 获取路由路径参数对象
            console.log(this.$route.params.id) // 获取路由路径参数对象指定的属性
            console.log(this.id) // 在 props 取出路由路径参数
        }
    }
}
</script>

<script setup>
import {useRoute} from 'vue-router'

const routeObj = useRoute() // 获取的跳转的路由对象
const propsData = defineProps(['id'])

function showRouteParams() {
    console.log(routeObj.params) // 获取路由路径参数对象
    console.log(routeObj.params.id) // 获取路由路径参数对象指定的属性
    console.log(propsData.id) // 在 props 取出路由路径参数
}
</script>

<style scoped>
div.blog-content {
    padding: 50px;
    background-color: rgb(228, 78, 190);
}
</style>